<template class="login_template">
    <div class="background" :style="{ backgroundImage: 'url(' + require('../assets/img/bg-1.jpg') + ')' }">
        <el-form
            :rules="rules"
            class="login-container"
            label-position="left"
            :model="loginForm"
            ref="loginForm"
            label-width="0px"
            v-loading="loading"
            justify="center"
        >
            <h3 class="login_title">试题市场登录</h3>
            <el-form-item prop="account">
                <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>
            <el-form-item style="width: 100%">
                <el-button type="primary" @click.native.prevent="submitClick('loginForm')" style="width: 100%">登录</el-button>
            </el-form-item>
            <router-link to="/register">没有账号？点击注册</router-link>
        </el-form>
    </div>
</template>
<script>
import { putRequest } from '../utils/api';
import { postJsonRequest } from '../utils/api';
import { getAllCookies } from '../utils/cookies';
import { getCookieByKey } from '../utils/cookies';
import { mySetCookie } from '../utils/cookies';

export default {
    mounted() {
        let account = this.$route.query.account;
        if (account == null || account == undefined) {
            return;
        } else {
            this.loginForm.account = account;
        }
    },
    data() {
        return {
            loginForm: {
                account: '',
                password: ''
            },
            rules: {
                account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            },
            checked: true,

            loading: false
        };
    },
    methods: {
        async submitClick(loginForm) {
            let _this = this;
            let res = await this.$refs[loginForm].validate(valid => {
                if (valid) {
                    this.loading = true;
                    postJsonRequest('/login/login', {
                        account: this.loginForm.account,
                        password: this.loginForm.password
                    })
                        .then(resp => {
                            console.log(resp.data.code);
                            _this.loading = false;
                            console.log(resp);
                            if (resp.data.code === 0) {
                                console.log('现在是 0');
                                this.$message.success("恭喜你登陆成功!");
                                // let user = resp.data.data;
                                // this.$store.dispatch('login', user);
                                this.$router.push({ path: '/home' });
                                // mySetCookie('userId', user.id, 3600);
                                // mySetCookie('account', user.account, 3600);
                                // console.log(getCookieByKey('user'));
                                // console.log(getCookieByKey('account'));

                                

                            }
                            // else if(resp.data.code === 500) {
                            //    _this.loading = false;
                            //   _this.$message.error('密码错误！');
                            //    return;
                            // }
                            else {
                                _this.$alert('登录失败!', '失败!');
                                _this.loading = false;
                            }
                        })
                } else {
                    // this.$message.warning('请完善信息！');
                    return;
                }
            });
        }
    }
};
</script>

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<style scoped>
@media only screen and (min-width: 900px) {
    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: auto auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        height: 50vh;
        opacity: 0.7;
        position: absolute;
        left: 30%;
        top: 20%;
    }
}
@media only screen and (min-width: 700px) and (max-width: 900px) {
    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: auto auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        height: 50vh;
        opacity: 0.7;
        position: absolute;
        left: 22%;
        top: 15%;
    }
}
@media only screen and (min-width: 500px) and (max-width: 700px) {
    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: auto auto;
        width: 60%;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        height: 50vh;
        opacity: 0.7;
        position: absolute;
        left: 15%;
        top: 15%;
    }
}
@media only screen and (max-width: 500px) {
    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: auto auto;
        width: 90%;
        display: block;
        padding: 20px 15px 15px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        height: 48vh;
        opacity: 0.7;
        position: absolute;
        left: 1%;
        top: 16%;
    }
    .login_title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #505458;
    }
}

.login_remember {
    margin: 0px 0px 35px 0px;
    text-align: left;
}
.background {
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    top: 0px;
    left: 0px;
    /* padding-top: 100hv; */
}
.login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}
</style>
